<template>
  <div class="detail-main">
    <el-card shadow="never" class="margin-30" :body-style="{ padding: '20px' }">
      <!-- status (integer, optional): 订单状态：0->待付款；1->待发货；2->已发货；3->已完成；4->退货；5->无效订单 -->
      <el-steps :active="orderBase.status + 1" align-center>
        <el-step title="待付款" :description="orderBase.createTime" />
        <el-step title="待发货" :description="orderBase.paymentTime" />
        <el-step title="已发货" :description="orderBase.modifyTime" />
        <el-step v-if="orderBase.status !== 4" title="已完成" :description="orderBase.finishTime" />
        <el-step v-if="orderBase.status == 4" title="退货" :description="orderBase.receiveTime" />
      </el-steps>
      <el-divider />

      <div>
        <div style="display: flex; align-items: center; padding: 15px 0;">
          <span style="font-size: 16px; font-weight: 600; margin-right: 20px;">订单信息:</span>
          <el-tag v-show="orderBase.status === 0" class="tab" size="small" type="danger" effect="dark">待付款</el-tag>
          <el-tag v-show="orderBase.status === 1" class="tab" size="small" type="warning" effect="dark">待发货</el-tag>
          <el-tag v-show="orderBase.status === 2" class="tab" size="small" type="success" effect="plain">已发货</el-tag>
          <el-tag v-show="orderBase.status === 3" class="tab" size="small" type="success" effect="plain">已完成</el-tag>
          <el-tag v-show="orderBase.status === 4" class="tab" size="small" type="warning" effect="dark">退货</el-tag>
          <el-tag v-show="orderBase.status === 5" class="tab" size="small" type="info" effect="plain">无效订单</el-tag>
        </div>
        <el-row :gutter="20" style="font-size: 14px;padding: 20px 0;">
          <el-col :span="6" :offset="0">
            <div>订单金额: <span style="color: #f00;">{{ orderBase.payAmount }}</span></div>
          </el-col>
          <el-col :span="6" :offset="0">
            <div>订单编号: {{ orderBase.orderSn }}</div>
          </el-col>
          <el-col :span="6" :offset="0">
            <div>用户账号: {{ orderBase.memberUsername }}</div>
          </el-col>
          <el-col :span="6" :offset="0">
            <div>备注: {{ orderBase.note }}</div>
          </el-col>
        </el-row>
        <el-row :gutter="20" style="font-size: 14px;">
          <el-col :span="6" :offset="0">
            <div>下单时间: {{ orderBase.createTime }}</div>
          </el-col>
          <el-col :span="6" :offset="0">
            <div>付款时间: {{ orderBase.paymentTime }}</div>
          </el-col>
          <el-col :span="6" :offset="0">
            <div>发货时间: {{ orderBase.modifyTime }}</div>
          </el-col>
          <el-col :span="6" :offset="0">
            <div>收货时间: {{ orderBase.finishTime }}</div>
          </el-col>
        </el-row>
        <el-divider />
        <!-- 收货人信息 -->
        <div style="display: flex; align-items: center; padding: 15px 0;">
          <span style="font-size: 16px; font-weight: 600; margin-right: 20px;">收货人信息:</span>
        </div>
        <el-row :gutter="20" style="font-size: 14px;padding: 20px 0;">
          <el-col :span="6" :offset="0">
            <div>收货人: {{ orderBase.receiverName }}</div>
          </el-col>
          <el-col :span="6" :offset="0">
            <div>用户姓名: {{ orderBase.memberUsername }}</div>
          </el-col>
          <el-col :span="6" :offset="0">
            <div>手机号码: {{ orderBase.receiverPhone }}</div>
          </el-col>
          <el-col :span="6" :offset="0">
            <div>邮政编码: {{ orderBase.receiverPostCode }}</div>
          </el-col>
        </el-row>
        <el-row :gutter="20" style="font-size: 14px;">
          <el-col :span="6" :offset="0">
            <div>城市: {{ orderBase.receiverProvince }}{{ orderBase.receiverCity }}</div>
          </el-col>
          <el-col :span="6" :offset="0">
            <div>详细地址: {{ orderBase.receiverDetailAddress }}</div>
          </el-col>
        </el-row>
        <el-divider />

        <div style="display: flex; align-items: center; padding: 15px 0;">
          <span style="font-size: 16px; font-weight: 600; margin-right: 20px;">商品信息:</span>
        </div>

        <el-table :data="orderItems" border stripe>
          <el-table-column prop="productName" label="商品名称" width="120" align="center" fixed="left" />
          <el-table-column prop="productName" label="商品图片" width="120" align="center">
            <template slot-scope="scope">
              <el-image style="width: 80px; height: 80px;" :src="scope.row.productPic" fit="fill" />

            </template>
          </el-table-column>
          <el-table-column label="是否退货" align="center">
            <template slot-scope="scope">
              <el-tag v-show="scope.row.isReturn === 1" type="danger" size="small" effect="plain">是</el-tag>
              <el-tag v-show="scope.row.isReturn === 0" type="info" size="small" effect="plain">否</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="productBrand" label="品牌" width="120" align="center" />
          <el-table-column prop="productPrice" label="价格" width="120" align="center" />
          <el-table-column prop="productQuantity" label="商品数量" width="120" align="center" />
          <el-table-column prop="productPrice" label="小计" width="120" align="center" />
        </el-table>
        <div style="display: flex; align-items: center; padding: 15px 0;">
          <span style="font-size: 16px; font-weight: 600; margin-right: 20px;">费用信息:</span>
        </div>
        <el-row :gutter="20" style="font-size: 14px;padding: 20px 0;">
          <el-col :span="6" :offset="0">
            <div>运费金额: <span style="color: #f00;">{{ 0 }}</span></div>
          </el-col>
          <el-col :span="6" :offset="0">
            <div>订单总金额: <span style="color: #f00;">{{ orderBase.payAmount }}</span></div>
          </el-col>
          <el-col :span="6" :offset="0">
            <div>实际金额: <span style="color: #f00;">{{ orderBase.payAmount }}</span></div>
          </el-col>
          <el-col :span="6" :offset="0">
            <div>促销优化金额: <span style="color: #f00;">{{ orderBase.totalAmount }}</span></div>
          </el-col>
        </el-row>
        <div v-show="orderBase.status === 2" style="font-weight: 600;">物流信息: <span
          style="font-weight: 600; color: #999;"
        >{{
          orderBase.deliveryCompany }} &nbsp; [{{ orderBase.deliverySn }}]</span></div>
        <div v-show="orderBase.status === 1" style="margin-top: 30px;">
          <el-form ref="sendForm" :model="send" :rules="rules" label-width="80px" :inline="false" size="mini">
            <el-row :gutter="20">
              <el-col :span="6" :offset="0">
                <el-form-item label="物流信息" prop="deliveryCompany">
                  <el-select v-model="send.deliveryCompany" placeholder="请选择">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6" :offset="0">
                <el-form-item label="物流单号" prop="deliverySn">
                  <el-input v-model="send.deliverySn" />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <div style="display: flex; justify-content: center; margin-top: 50px;">
            <el-button type="primary" size="default" @click="doSenDone">确认发货</el-button>
          </div>
        </div>

      </div>
    </el-card>

  </div>
</template>

<script>
import { orderDetail, sendDone } from '@/api/order'

export default {
  name: 'DetailPage',

  data() {
    return {
      step: 1,
      orderId: null,
      orderBase: '',
      orderItems: [],
      send: {},
      rules: {
        deliverySn: [
          { required: true, message: '请填写物流单号', trigger: 'change' }
        ],
        deliveryCompany: [
          { required: true, message: '请选择物流公司', trigger: 'change' }
        ]
      },
      options: [{
        value: '顺丰快递',
        label: '顺丰快递'
      }, {
        value: '韵达快递',
        label: '韵达快递'
      }, {
        value: '中国邮政',
        label: '中国邮政'
      }, {
        value: '中通快递',
        label: '中通快递'
      }, {
        value: '申通快递',
        label: '申通快递'
      }]
    }
  },
  created() {
    this.orderId = this.$route.params.id
    if (this.orderId) {
      this.getOrderDetail()
    }
  },

  mounted() {

  },

  methods: {
    doSenDone() {
      this.$refs.sendForm.validate(async(valid) => {
        if (valid) {
          const res = await sendDone(this.send)
          console.log(res)
          const { success, message } = res
          if (success) {
            this.$message.success('发货成功')
            this.getOrderDetail()
          } else {
            this.$message.error(message)
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },

    async getOrderDetail() {
      const res = await orderDetail(this.orderId)
      const { success, message, data: { orderDetail: { orderBase, orderItems }}} = res
      if (success) {
        this.orderBase = orderBase
        this.orderItems = orderItems
        this.send.orderId = orderBase.id
      } else {
        this.$message.error(message)
      }
      console.log(res)
    }
  }
}
</script>

<style lang="scss" scoped>
// .el-divider.el-divider--horizontal{
//   height: 2px;
// }
</style>
